<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Omi DialogTest</title>
</head>
<body>
    <a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
        <img src="../../asset/github.png" alt="" />
    </a>
    <script src="../../dist/omi.js"></script>
    <script>

        var DialogTest =  Omi.create("DialogTest",{
            showAlert :function() {
                dialog.alert("aa");
            },
            style:function () {
               return `button{ color:green;}`;
            },
            render:function(){
                return `
                <div>
                        <button onclick="showAlert()">Click Me</button>
                </div>
                `;
        }
        })


        var Alert =  Omi.create("Alert",{
            style:function(){
               return `
               .mask{
                    background-color:rgba(0,0,0,.7);
                    position:absolute;
                    z-index:2;
                    left:0;
                    top:0;
                }
                .msg{
                    border: 1px solid #ccc;
                    padding: 14px;
                    text-align: center;
                    position:absolute;
                    z-index:3;
                    color:white;
                    left:50%;
                    top:50%;
                    margin-top:-100px;
                    margin-left:-50px;
                }
                button{
                    margin-top:10px;
                    cursor:pointer;
                }
                `
            },
            show:function(){
                this.data.visible = true;
                this.update();
            },
            close:function(){
                this.data.visible = false;
                this.update();
            },
            render:function(){
                if(!this.data.visible) return;
                this.data.w = window.innerWidth;
                this.data.h = window.innerHeight;
                return '<div>\
                            <div class="mask" style="width:{{w}}px;height:{{h}}px;"></div>\
                            <div class="msg">\
                                <div>{{msg}}</div>\
                                <button  onclick="close()">close</button>\
                            </div>\
                        </div>';
        }
        });

        var dialog = {};
        dialog.alertInstance = null;
        dialog.alert = function(msg) {
            if (dialog.alertInstance) {
                dialog.alertInstance.setData({msg: msg, visible: true}, true);
            } else {
                dialog.alertInstance = new Alert({msg: msg, visible: true});
                Omi.render(dialog.alertInstance ,'body',true);
            }
        }

        Omi.render(new DialogTest(),'body',true);
    </script>
</body>
</html>